<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游平台</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/style2.0.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
      .r1c1{
          /* 设置边框 */
          border: 3px solid #fcfafa;
          /* 背景颜色 */
          background-color: rgb(252, 253, 252);

      }
      h6{
        font-family: "宋体";
      }
  </style>

</head>
<body>
<!-- 标题 -->
<header>
<div class="container-fluid">
  
  <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="index.html"><img src="./img/logo1.png" alt="" style="width: 100px;"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
     
      <!-- Navbar links -->
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="index.html">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="jingguan1.html">热门城市</a>
          </li> 
          <li class="nav-item">
            <a class="nav-link" href="4.0.html">热门景点</a>
          </li>
        </ul>
        <div class="btn-group">
          <a href="login.html" class="btn btn-outline-light">登录</a>
       </div>
      </div>  
  </nav>
</div>
</header>
<!-- 轮播图 -->
<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <!-- 第一个轮播图指示器，设置为当前激活的，class="active" -->
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="../item/img/t1.jpg">
      <div class="carousel-caption d-none d-md-block">
          <h1><b>故宫</b></h1>
          <p><i>诗意之色千千万，紫禁城中占一半， 这些我们寻觅的颜色，都能在故宫中找到。 在这六百年风起云涌里， 它留下了中国最美的颜色， 一座紫禁城，半部色彩史。</i></p>
        </div>
    </div>
    <div class="carousel-item">
      <img src="../item/img/tai1.jpg">
      <div class="carousel-caption d-none d-md-block">
          <h1><b>泰山</b></h1> <!-- 定义标题，使用h1标签，并添加<b>标签，表示加粗 -->
          <p><i>泰山相伴上下五千年的华夏文明传承历史，集国家兴盛、民族存亡的象征于一身，是中华民族的精神家园，东方文化的缩影，“天人合一”思想的寄托之地。</i></p>
        </div>
    </div>
    <div class="carousel-item">
      <img src="../item/img/c1.jpg">
      <div class="carousel-caption d-none d-md-block">
          <h1><b>长白山</b></h1>
          <p><i>长白山常年白雪覆身、云雾缭绕，如同身着白衣的长者，总是庄严肃重。今天的长白山之名，人们还赋予了一个浪漫的解释：长相守，到白头。</i></p>
        </div>
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <!-- 上一张图片按钮，点击后跳转到上一张图片，class="carousel-control-prev" -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <!-- 显示上一张图片的图标，class="carousel-control-prev-icon" -->
    <span class="carousel-control-prev-icon"></span>
  </a>
  <!-- 下一张图片按钮，点击后跳转到下一张图片，class="carousel-control-next" -->
  <a class="carousel-control-next" href="#demo" data-slide="next">
     <!-- 显示下一张图片的图标，class="carousel-control-next-icon" -->
    <span class="carousel-control-next-icon"></span>
  </a>
</div>


<!-- 内容填充 -->

<br><br>
<div class="container container1">
  <div class="image-wrap" style="--img:url(../img/r1.jpg)" data-text="长城"></div>
  <div class="image-wrap" style="--img:url(../img/g3.jpg)" data-text="天安门"></div>
  <div class="image-wrap" style="--img:url(../img/s1.jpg)" data-text="黄浦江"></div>
  <div class="image-wrap" style="--img:url(../img/l2.jpg)" data-text="庐山"></div>
  <div class="image-wrap" style="--img:url(../img/t4.jpg)" data-text="黄鹤楼"></div>
</div>
<br><br><br>
<div class="container">
    <div class="row row-item-info r1c1 rounded">
        <div class="col-lg-5 col-md-6">
            <div class="row">
                <div class="col col-item-img">
                    <img alt="140x140" src="./img/l2.jpg" class="rounded img-fluid"/>
                </div>
            </div>
        </div>
        <div class="col-lg-7 col-md-6">
            <div id="item-name" class="mt-3"></div>
            <div id="item-price"></div>
            <div class="col column">
              <a href="https://baike.baidu.com/item/%E9%95%BF%E7%99%BD%E5%B1%B1%E8%84%89/2284126?fromtitle=%E9%95%BF%E7%99%BD%E5%B1%B1&fromid=9596" class="btn btn-light"><h2>长白山</h2></a>
               <h6><i><b>长白山脉</b></i></h6><!-- 定义项目描述，h6标签，包含斜体i和粗体b -->
               <br><br>
               <p><b>点评：</b>《山海经》里，她叫<b>“不咸山”</b>，似盐之白，无盐之咸。魏晋时期是“徒太山”，隋唐时是“太白山”。她是东北各族的<b>圣山</b>，神话中满族的发源处。她还是《盗墓笔记》中，吴邪和张起灵<b>“十年之约”</b>的守门之地。长白山常年白雪覆身、云雾缭绕，如同身着白衣的长者，总是庄严肃重。今天的长白山之名，人们还赋予了一个浪漫的解释：<b>长相守，到白头。</b></p>
           </div>
        </div>
    </div>
    <br>
    <div class="row row-item-info r1c1 rounded">
        <div class="col-lg-5 col-md-6">
            <div class="row">
                <div class="col col-item-img">
                    <img alt="140x140" src="./img/3.jpg" class="rounded img-fluid"/>
                </div>
            </div>
        </div>
        <br>
        <div class="col-lg-7 col-md-6">
            <div id="item-name" class="mt-3"></div>
            <div id="item-price"></div>
            <div class="col column">
                <a href="https://baike.baidu.com/item/%E5%A4%A9%E5%9D%9B/2820294" class="btn btn-light"><h2>天坛</h2></a>
               <h6><i><b>天地坛</b></i></h6>
               <br><br>
               <p><b>点评：</b>1998年联合国教科文组织世界遗产委员会将天坛列入了<b>世界遗产名录</b>。天坛独特的历史文化内涵、宝贵的科学艺术价值及优美的园林景观获得了世人更广泛的认识和关注。天坛是中国古代皇帝的<b>祭坛</b>，也是中国悠久祭天文化的结晶，其宏伟的建筑、苍翠的古树、丰富的文物收藏既记载了<b>中国古代先民</b>的企盼和希望，也记录了封建帝王的睿智、昏庸和腐朽。</p>
           </div>
        </div>
    </div>
    <br>
    <div class="row row-item-info r1c1 rounded">
        <div class="col-lg-5 col-md-6">
            <div class="row">
                <div class="col col-item-img">
                    <img alt="140x140" src="./img/8.jpg" class="rounded img-fluid"/>
                </div>
            </div>
        </div>
        <div class="col-lg-7 col-md-6">
            <div id="item-name" class="mt-3"></div>
            <div id="item-price"></div>
            <div class="col column">
                <a href="https://baike.baidu.com/item/%E4%B8%BD%E6%B1%9F%E5%8F%A4%E5%9F%8E/304665" class="btn btn-light"><h2>丽江古城</h2></a>
               <h6><i><b>大研镇</b></i></h6>
               <br><br>
               <p><b>点评：</b>丽江古城是<b>自然美</b>与<b>人工美</b>，<b>艺术</b>与<b>适用经济</b>的有机统一体，丽江古城是古城风貌整体保存完好的典范。古城所包涵的艺术来源于<b>纳西人民</b>对生活的深刻理解，是地方民族文化技术交流融汇的产物，是<b>中华民族宝贵建筑遗产</b>的重要组成部分。为传统人类居住地、土地使用提供了杰出范例，为<b>人类社会文明</b>进程中处理人类与环境的相互作用提供了研究参考。</p>
           </div>
        </div>
    </div>
</div>

<br><br><br>
<!-- 底部导航栏 -->
<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-bottom">
  <input type="button" onclick="myFunction1()" class=" text-center btn btn-dark" style="width: 25%;" value="关于我们" />
  <input type="button" onclick="myFunction2()" class=" text-center btn btn-dark" style="width: 25%;" value="联系方式" />
  <input type="button" onclick="myFunction3()" class=" text-center btn btn-dark" style="width: 25%;" value="旗下网站" />
  <input type="button" onclick="myFunction4()" class=" text-center btn btn-dark" style="width: 25%;" value="特别致谢" />
</nav>

</body>
<script>
  function myFunction1(){
    alert("由第15组成员制作");
  }
  function myFunction2(){
    alert("email：1796745716@qq.com");
  }
  function myFunction3(){
    alert("暂时没有");
  }
  function myFunction4(){
    alert("www.baidu.com");
  }
  </script>
</html>